<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h2{
				text-transform: uppercase
			}
			.link{
				background: #000;
				width: 400px;
				display: flex;
				justify-content: center;
			}
			.link>a{
				margin: .5em 2em;
				color: #fff;
				letter-spacing: .25em;
				
			}
			.show{
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div class="show">
		<h2>stone700's homepage</h2>
		<div id="info">some message</div>
		<div class="link">
			<a href="https://other-web-nf01-sycdn.kuwo.cn/0eed2dd675e1c3054a747ee31210b2d3/627cb65d/resource/n1/76/15/1193774940.mp3">大风吹</a>
			<a href="https://www.w3school.com.cn/example/html5/mov_bbb.mp4">视频</a>
			<a href="https://gitee.com/stone700/tupian/raw/master/gost.mp4">gost.mp4</a>
		</div>		
		
		<audio src="1193774940.mp3" controls></audio>		
		<video controls preload="auto" src="https://www.w3school.com.cn/example/html5/mov_bbb.mp4"></video>
		<video controls id="vs" preload="auto" src="https://gitee.com/stone700/tupian/raw/master/gost.mp4"></video>
		</div>
	</body>
</html>
<script>
	window.onload=function(){
		v=document.getElementById("vs");
		info=document.getElementById("info");
		v.addEventListener('loadstart',function(e){
		  info.innerHTML=("loadstart")
		})
		v.addEventListener('loadedmetadata',function(e){
		  info.innerHTML=("done")
		})
	}
	
</script>